<template>
  <div class="container">
    <div class="J-weixin-tip weixin-tip" ref="myWeixinTip">
      <div class="weixin-tip-content" ref="myWeixinTipContent">
        请在浏览器中打开
        <br />以完成支付
      </div>
    </div>
    <div class="J-weixin-tip-img weixin-tip-img"></div>
  </div>
</template>
<script setup name="alipay">
import { ref, onMounted } from 'vue'
import { Toast } from 'vant'
import _AP from '@/utils/ap'
console.log(_AP)
const myWeixinTipContent = ref(null)
const myWeixinTip = ref(null)
onMounted(() => {
  if (location.hash.indexOf('error') !== -1) {
    Toast('参数错误，请检查')
  } else {
    const ua = navigator.userAgent.toLowerCase()
    const tip = document.querySelector('.weixin-tip')
    const tipImg = document.querySelector('.J-weixin-tip-img')
    if (ua.indexOf('micromessenger') !== -1) {
      tip.style.display = 'block'
      tipImg.style.display = 'block'
      if (
        ua.indexOf('iphone') !== -1 ||
        ua.indexOf('ipad') !== -1 ||
        ua.indexOf('ipod') !== -1
      ) {
        tipImg.className = 'J-weixin-tip-img weixin-tip-img iphone'
      } else {
        tipImg.className = 'J-weixin-tip-img weixin-tip-img android'
      }
    } else {
      const getQueryString = function (url, name) {
        const reg = new RegExp('(^|\\?|&)' + name + '=([^&]*)(\\s|&|$)', 'i')
        if (reg.test(url)) return RegExp.$2.replace(/\+/g, ' ')
      }
      const param = getQueryString(location.href, 'goto') || ''
      location.href = param !== '' ? _AP.decode(param) : 'pay.htm#error'
    }
  }
})
</script>
<style lang="scss" scoped>
.container {
  .weixin-tip {
    display: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 15px;
    right: 20px;
    width: 265px;
    padding: 55px 0 0;
    text-align: left;
    background: url()
      no-repeat right top;
    background-size: 45px 68px;
  }

  .weixin-tip-img {
    display: none;
    padding: 110px 0 0;
  }

  .weixin-tip-img::after {
    display: block;
    margin: 15px auto;
    content: ' ';
    background-size: cover;
  }

  .weixin-tip-img.iphone::after {
    width: 150px;
    height: 150px;
    background-image: url();
  }

  .weixin-tip-img.android::after {
    width: 173px;
    height: 240px;
    background-image: url();
  }
}
</style>
